<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>实现文件上传</title>
    <script type="application/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>
    <script type="application/javascript">
        $(function () {
            $("#upBtn").click(function () {
                if($("#file").value==""){
                    alert("请选择文件上传！");
                }else {
                    $("#form").submit();
                }
            });
            $("#jsonBtn").click(function () {
                let param = new Object();
                param.username = "zhangsan";
                param.gender = "男";
                $.ajax({
                    type: "POST",
                    url: "${pageContext.request.contextPath}/user/test_json.action",
                    //contentType: "application/json",
                    data: param,
                    success: function (result) {
                        $("#dataDiv").text("邮箱"+result.email+"=====姓名"+result.username);

                    }
                });
            });
        });


    </script>
    <style>
        #uploadDiv{
            padding: 30px;
            line-height: 30px;
        }
        #file{
            height: 30px;
            width: 260px;
            outline: none;
        }
        #upBtn{
            height: 30px;
            width: 80px;
            border: 1px solid cornflowerblue;
            background-color: cornflowerblue;
        }
        #table{
            text-align: left;
        }
    </style>
</head>
<body>
<div id="dataDiv"></div>
<div id="uploadDiv">
    <form method="post" id="form" enctype="multipart/form-data"
          action="${pageContext.request.contextPath}/save_upload.action">
        <span>实现文件上传</span>
        <input type="file" id="file" name="file"/> <br/>
        <input type="button" value="上传文件" id="upBtn"> &nbsp;&nbsp;&nbsp;
        <input type="button" value="输入/输出 皆是json" id="jsonBtn">
    </form>

    <br/>
    <h3>文件下载列表</h3>
    <table style="width: 500px" id="table">
        <tr><th width="80px">序号</th><th width="220px">文件名称</th><th>下载文件</th></tr>
        <c:forEach var="file" varStatus="status" items="${requestScope.fileList}">
            <tr>
                <td>${status.count}</td><td>${file.name}</td><td><a href="${pageContext.request.contextPath}${file.path}">下载</a></td>
            </tr>
        </c:forEach>
    </table>
</div>
</body>
</html>
